<template>
  <view class="page">
    <view class="page-navbar">
      <u-navbar
        :fixed="false"
        :placeholder="true"
        title="积分充值"
        bgColor="#fff"
        :autoBack="true"
        :titleStyle="{ color: '#000000' }"
        :leftIconColor="'#000000'"></u-navbar>
    </view>

    <view class="page-ctx">
      <view class="sec-recharge">
        <view class="main-title">选择充值金额：</view>
        <view class="money-list flex">
          <view
            class="item column-flex-center"
            v-for="(item, index) in recharge_list"
            :key="index"
            :class="{ selected: recharge_select.id == item.id }"
            @click="toggle_recharge(item)">
            <view class="price-box">
              <!-- <text class="huobi" v-if="!item.is_custom">￥</text> -->
              <text class="value">{{ item.man }}</text>
            </view>
            <!-- <view class="zeng" v-if="!item.is_custom">
							赠送￥{{item.zeng}}
						</view> -->
          </view>
        </view>
      </view>

      <view class="sec-input">
        <view class="main-title">输入其它充值金额</view>
        <view class="input-box">
          <view class="input-item">
            <view class="huobi flex-center">￥</view>
            <u--input
              type="digit"
              v-model="recharge_money"
              placeholder="输入充值金额"
              border="none"
              clearable
              fontSize="18px"
              :customStyle="{ height: '30px', padding: '0 20px' }"></u--input>
          </view>
        </view>
      </view>
      <view class="sec-pay">
        <view class="main-title flex-between">
          <view class="title-label">充值方式</view>
          <view class="title-value flex">
            <image src="@/static/balance/weixin.png" mode=""></image>
            <text>微信支付</text>
          </view>
        </view>
      </view>
    </view>

    <w_bottom_safe height="140" />

    <view class="page-foot">
      <view class="safe-fixed-bottom">
        <view class="terms-info flex">
          <view class="radio-box flex" @click="is_agree = !is_agree">
            <view class="icon-box">
              <image
                v-if="is_agree"
                src="@/static/common/radio1.png"
                mode=""></image>
            </view>
            <text>我已阅读并同意签订</text>
          </view>
          <text class="link" @click="toTerms()">
            《{{ terms_info.title }}》
          </text>
        </view>

        <button class="btn flex-center" :disabled="false" @click="doSubmit()">
          立即充值
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import { BALANCE_RECHAGRE_ARTICLE_ID } from "@/config/env.js";

export default {
  components: {},
  data() {
    return {
      headBackground: "rgba(255,255,255,0)", //控制顶部标题栏颜色 默认透明颜色 transparent

      recharge_money: "",
      recharge_list: [],
      recharge_select: {},

      is_agree: false,
      terms_info: {
        title: "",
      },
    };
  },
  onLoad() {},
  onShow() {
    this.setView();
  },

  methods: {
    setView() {
      this.query_recharge_money();
      this.query_recharge_terms();
    },
    query_recharge_money() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "money_investActivity",
        },
      }).then((res) => {
        if (res.code == 200) {
          let list = res.data.ruleInfo;
          list.forEach((v, index) => {
            v.id = index + 1;
          });
          // list.push({
          //   id: -1,
          //   man: "自定义",
          //   zeng: "",
          //   is_custom: true,
          //   jifen: "",
          //   yhq: "",
          // });
          this.recharge_list = list || [];
        }
      });
    },
    query_recharge_terms() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "news_detail",
          id: BALANCE_RECHAGRE_ARTICLE_ID,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.terms_info = res.data.info;
        }
      });
    },
    toTerms() {
      this.toRoute({
        path: "/balance-recharge-terms",
        query: {
          id: BALANCE_RECHAGRE_ARTICLE_ID,
          title: this.terms_info.title,
        },
      });
    },

    toggle_recharge(item) {
      this.recharge_select = item;
    },

    doSubmit() {
      console.log("提交充值");
      // this.toRoute({
      // 	path: '/balance-recharge-success',
      // 	mode: 'redirectTo'
      // })
      if (!this.recharge_select.id) {
        this.$alert("请选择充值金额");
        return;
      }
      if (this.recharge_select.is_custom) {
        if (!this.recharge_money || parseFloat(this.recharge_money) <= 0) {
          this.$alert("请输入有效的充值金额");
          return;
        }
      }
      if (!this.is_agree) {
        this.$alert("请阅读并勾选协议条款");
        return;
      }

      this.mix_throttle(this.doSubmitFn);
    },

    doSubmitFn() {
      let money = this.recharge_select.is_custom
        ? this.recharge_money
        : this.recharge_select.man;
      money = parseFloat(money);
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "pay_weixin",
          orderType: 2, //订单类型：1-商品订单 2-余额充值
          price: money,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.use_weixin_pay(res.data);
          // this.toBack({
          // 	time: 1500
          // })
        } else {
          this.$alert(res);
        }
      });
    },
    // 微信支付
    use_weixin_pay(data) {
      uni.requestPayment({
        provider: "wxpay",
        timeStamp: String(data.timeStamp),
        nonceStr: data.nonceStr,
        package: data.package,
        signType: data.signType,
        paySign: data.paySign,
        success: (res) => {
          console.log("支付成功", res);
          this.$alert("支付成功");
          // this.toBack({
          // 	time: 1500
          // })
          this.toPaySuccess();
        },
        fail: (err) => {
          this.$alert("支付失败");
          setTimeout(() => {
            this.toPayFail();
          }, 1000);
          // console.log('支付失败', err)
        },
        complete: () => {
          this.hideLoading();
        },
      });
    },
    toPaySuccess() {
      this.toPayResult(1);
    },
    toPayResult(is_pay = 0) {
      // this.toRoute({
      // 	// mode: 'redirectTo'
      // 	path: '/payment-success',
      // 	query: {
      // 		order_id: this.order_id,
      // 		type: 'order',
      // 		is_pay: is_pay,
      // 	},
      // })

      this.toRoute({
        mode: "redirectTo",
        path: "/balance-recharge-success",
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f6fafd;
  background: #ffffff;
}
</style>

<style lang="scss">
.input-box .input-item input {
  height: 60rpx;
}

.input-box .u-input__content {
  height: 60rpx;
}

.input-box .u-input__content__field-wrapper__field {
  height: 60rpx;
}
</style>

<style lang="scss" scoped>
::v-deep .u-popup__content {
  // border-radius: 32rpx 32rpx 32rpx 32rpx;
  background: transparent;
}

::v-deep .u-input__content__field-wrapper__field {
  height: 60rpx;
}

.page {
}

.page-navbar {
  position: relative;
  z-index: 2;
}

.page-ctx {
  position: relative;
  z-index: 2;
  padding: 24rpx 32rpx;
}

.main-title {
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 32rpx;
  color: #000000;
}

.sec-recharge {
  margin-bottom: 16rpx;

  .money-list {
    flex-wrap: wrap;
    margin-top: 16rpx;
    margin-bottom: 20rpx;

    .item {
      transition: 0.3s;
      margin-bottom: 16rpx;
      margin-right: 16rpx;
      width: 218rpx;
      height: 80rpx;
      background: #f6fafd;
      border: 2rpx solid #f6fafd;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;

      &:nth-child(3n) {
        margin-right: 0;
      }

      &.selected {
        background: rgba(244, 156, 13, 0.16);
        border: 2rpx solid #f49c0d;

        .price-box {
          .huobi {
            color: #cb0011;
          }

          .value {
            color: #f49c0d;
            font-weight: bold;
          }
        }

        .zeng {
          color: #cb0011;
        }
      }

      .prcie-box {
        .huobi {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #000000;
        }

        .value {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 48rpx;
          color: #000000;
        }
      }

      .zeng {
        margin-top: 20rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 20rpx;
        color: #000000;
      }
    }
  }
}

.sec-input {
  margin-bottom: 52rpx;

  .input-box {
    margin-top: 16rpx;
    border-bottom: 2rpx solid #f3f4f8;

    .input-item {
      position: relative;

      .huobi {
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
        bottom: 0;
        width: 40rpx;

        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #000000;
      }
    }
  }
}

.sec-pay {
  .title-value {
    image {
      width: 40rpx;
      height: 40rpx;
    }

    text {
      margin-left: 24rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;
    }
  }
}

.terms-info {
  position: absolute;
  top: -65rpx;

  .radio-box {
    .icon-box {
      border: 1rpx solid #ccc;
      width: 32rpx;
      height: 32rpx;
      border-radius: 50%;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }

    text {
      margin-left: 12rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #000000;
    }
  }

  .link {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #f49c0d;
  }
}

.page-foot {
  .btn {
    width: 100%;
    height: 80rpx;
    background: #f49c0d;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #ffffff;
  }
}
</style>
